<template>
  <div class="user-container">
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>重置密码</span>
      </div>
      <div class="text item">
        <el-form :model="userForm"
                 :rules="rules"
                 ref="userForm"
                 label-width="100px"
                 class="demo-userForm">
          <el-form-item label="原密码"
                        prop="old_pwd">
            <el-input placeholder="请输入原密码"
                      v-model="userForm.old_pwd"
                      style="width:400px">
            </el-input>
          </el-form-item>
          <el-form-item label="新密码"
                        prop="new_pwd">
            <el-input placeholder="请输入新密码"
                      v-model="userForm.new_pwd"
                      style="width:400px"></el-input>
          </el-form-item>
          <el-form-item prop="re_pwd"
                        label="确认新密码">
            <el-input placeholder="请再次输入新密码"
                      v-model="userForm.re_pwd"
                      style="width:400px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ruleForm')">提交修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { setPwd } from '@/api/user'
export default {
  name: 'UserPage',
  data () {
    return {
      userForm: {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      },
      rules: {
        old_pwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }, { min: 6, max: 15, message: '密码字符在6-15', trigger: 'blur' }],
        new_pwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }, { min: 6, max: 15, message: '密码字符在6-15', trigger: 'blur' }],
        re_pwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }, { min: 6, max: 15, message: '密码字符在6-15', trigger: 'blur' }]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm () {
      this.$refs.userForm.validate(async isOK => {
        const res = await setPwd(this.userForm)
        console.log(res)
        this.userForm = {
          old_pwd: '',
          new_pwd: '',
          re_pwd: ''
        }
        this.$message.success('更新数据成功')
      })
    },
    resetForm () {
      this.userForm = {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      }
    }
  }
}
</script>

<style>
</style>
